 <!--  TODO   没有找到对应接口  bjtang 2024.3.25  -->
<template>
    <div>
        <div style="margin-left: 10px;">
            <el-form>
                <!-- <el-row :gutter="10">
                    <el-col :span="3">
                        <el-form-item label="A号码:">
                            <el-input v-model="searchForm.telA" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="B号码:">
                            <el-input v-model="searchForm.telB" />
                        </el-form-item>

                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="X号码:">
                            <el-input v-model="searchForm.telX" />
                        </el-form-item>

                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary">查询</el-button>
                    </el-col>
                </el-row> -->
                <el-form-item label="数据切换:">
                    <el-select v-model="dataSelect" placeholder="请选择" @change="getRecords">
                        <el-option v-for="item in dataGroup" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <div>
                        <el-tag class="ml-2" style="margin-left: 10px;" type="success" size="large">在线总数:{{ total
                        }}</el-tag>
                        <el-tag class="ml-2" style="margin-left: 10px;" type="default" size="large">默认:{{ defaultTotal
                        }}</el-tag>
                        <el-tag class="ml-2" style="margin-left: 10px;" type="warning" size="large">落地显:{{ fallTotal
                        }}</el-tag>
                    </div>
                </el-form-item>

            </el-form>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%;height:60vh" stripe>
                <el-table-column type="index" width="80" align="center" label="序号" />
                <el-table-column prop="callID" label="callId" align="center" />
                <el-table-column prop="telA" label="A号码" align="center" />
                <el-table-column prop="telB" label="B号码" align="center" width="200" />
                <el-table-column prop="telX" label="X号码" align="center" />
                <!-- <el-table-column prop="callDuration" label="通话时长(s)" align="center" /> -->
                <el-table-column prop="callTime" label="呼叫时间" :formatter="formatDateTime" align="center" />
                <!-- <el-table-column prop="bindTime" label="绑定时间" :formatter="formatDateTime" align="center" /> -->
                <!-- <el-table-column prop="customerName" label="客户名称" align="center" /> -->
            </el-table>
        </div>
        <!-- <div style="margin-top: 20px;">
            <el-pagination style="justify-content: center;" v-model:current-page="currentPageIndex"
                v-model:page-size="pageSize" :page-sizes="[10, 20]" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" />
        </div> -->
    </div>
</template>

<script setup lang="ts">

import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { currentBill } from "@/api/bussiness/axb";
import {formatDateTime} from '@/utils/index'

onMounted(() => {
    getRecords()
})
const total = ref(0)
const defaultTotal = ref(0)
const fallTotal = ref(0)
const dataSelect = ref(1)

const tableData = ref([])
const dataGroup = ref([
    { label: '默认', value: 1 },
    { label: '落地', value: 2 },
])
const getRecords = () => {
    const params = {
        callType: dataSelect.value
    }
    currentBill(params).then(res => {
        if (res.code === 200) {
            tableData.value = []
            defaultTotal.value = res.data.defaultSize
            fallTotal.value = res.data.fallSize
            total.value = defaultTotal.value + fallTotal.value
            tableData.value.push(...res.data.list)
        } else {
            // tableData.value = []
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
</script>
<style scoped ></style>